<template>
  <div class="box">
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="设置"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div>
      <van-cell size="large" title="深色模式" />
      <div class="cut" />
      <van-cell size="large" title="新消息通知" />
      <van-cell size="large" title="账号与安全" />
      <div class="cut" />
      <van-cell size="large" title="用户使用协议" />
      <van-cell size="large" title="隐私保护政策" />
      <div class="btn">
        <van-button @click="show = true">退出登录</van-button>
      </div>
    </div>
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      description=""
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import { it } from "node:test";

const router = useRouter();
const show = ref(false);
const actions = [{ name: "确定退出", index: 0 }];
function back() {
  window.history.go(-1);
}

function onSelect(item) {
  if (item.index === 0) {
    localStorage.clear();
    // 退出登录
    show.value = false;
    // 跳转登录页面
    router.replace("/login");
  }
}
</script>

<style scoped lang="scss">
.box {
  background-color: #eee;
  height: 100%;
  .cut {
    height: 10px;
  }
  .btn {
    text-align: center;
    position: fixed;
    bottom: 40px;
    width: 92%;
    margin: 0 15px;
    .van-button {
      display: block;
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>
